<template>
  <div class="register">
    <v-header :title="'注册'"></v-header>
    <main class="ma">
      <img src="../../assets/images/orange.png" alt="" class="ma" />
      <van-form @submit="onSubmit">
        <van-field
          v-model="phone"
          name="phone"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
      <p><router-link to="/login">已经有账号了？去登录</router-link></p>
    </main>
  </div>
</template>

<script>
import {doRegister} from '@/request/api.js';
export default {
  data() {
    return {
      phone: "",
      password: "",
    };
  },
  methods: {
    async onSubmit(user) {
      let res=await doRegister(user);

      if( res.data.code==200 ){
        this.$Toast.success('注册成功！')
        //转跳到登录
        setTimeout(()=>{
          this.$router.replace("/login")
        },2000)
      }else{
        this.$Toast.fail(res.data.msg);
      }
    },
  },
};
</script>

<style scoped>
.register {
  height: 100vh;
  background-color: #fff;
}
main {
  margin-top: 1.4rem !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
main img {
  display: block;
  width: 1.82rem;
  height: 0.48rem;
}
main p {
  font-family: PingFangSC-Light;
  font-size: 0.12rem;
  color: #333333;
  text-align: center;
}
</style>